<template>
  <div>
    <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
    <div class="tip">规则信息添加</div>

    <el-form ref="form" :model="ruleForm" label-width="80px">
      <el-form-item label="规则名称" required>
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="规则描述">
        <el-input v-model="ruleForm.describe"></el-input>
      </el-form-item>
      <el-form-item label="企业成员" required>
        <el-button type="primary" @click="selectMemberVisible = true">+ 添加成员</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag v-for="tag in ruleForm.member" :key="tag.name" closable @close="closeTagHandle(tag)" style="margin-right: 10px"> {{ tag.name }}</el-tag>
      </el-form-item>
      <el-form-item label="触发条件" required>
        <el-button type="primary" @click="selectRulesVisible = true">+ 添加规则</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag v-for="tag in ruleForm.rules" :key="tag.case" closable @close="closeTagHandleRule(tag)" style="margin-right: 10px"> {{ tag.case }}</el-tag>
      </el-form-item>
    </el-form>

    <div class="button-strip">
      <el-button type="primary" @click="submit">设置</el-button>
      <el-divider direction="vertical" content-position="center"></el-divider>
      <el-button plain @click="back">返回</el-button>
    </div>

    <el-dialog title="选择成员" :visible.sync="selectMemberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
      <List_multiple_select ref="selectMember" :listFields="listFields" :dataSource="memberList" type="filter"/>
      <span slot="footer" class="dialog-footer">
                <el-button @click="selectMemberVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitMember">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="选择规则" :visible.sync="selectRulesVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
      <List_multiple_select ref="selectRule" :listFields="listRuleFields" :dataSource="ruleList" type="filter"/>
      <span slot="footer" class="dialog-footer">
                <el-button @click="selectRulesVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRule">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import List_multiple_select from "@/components/list_multiple_select/list_multiple_select";
  export default {
    name: "censorship_add",
    components: {List_multiple_select},
    data() {
      return {
        selectMemberVisible: false,
        selectRulesVisible: false,
        memberList: [
          {
            name: '张三',
          },
          {
            name: '李四',
          },
        ],
        ruleList: [
          {
            case: '话术监听',
          },
          {
            case: '聊天记录监听',
          },
          {
            case: '通话记录监听',
          },
          {
            case: '客户资料监听',
          },
          {
            case: '敏感词监听',
          },
        ],
        listFields: {
          name:'名称'
        },
        listRuleFields: {
          case:'名称'
        },
        ruleForm: {
          name: '',
          describe:'',
          member: [],
          rules:[],
          creator:'admin'
        },
        parent: {
          currentPanel : 'list',
          data: {}
        }
      }
    },
    mounted() {
    },
    methods: {
      back() {
        this.$emit("currentHandle", {'currentPanel':'list'},'back')
      },
      submit(){
        this.parent.data = this.ruleForm
        this.$emit("currentHandle", this.parent)
      },
      closeTagHandle(tag) {
        this.ruleForm.member.splice(this.ruleForm.member.indexOf(tag), 1);
      },
      closeTagHandleRule(tag) {
        this.ruleForm.member.splice(this.ruleForm.member.indexOf(tag), 1);
      },
      submitMember() {
        let data = this.$refs.selectMember.getData();
        this.ruleForm.member = data
        this.selectMemberVisible = false
      },
      submitRule() {
        let data = this.$refs.selectRule.getData();
        this.ruleForm.rules = data
        this.selectRulesVisible = false
      }
    }
  }
</script>

<style scoped>
  .el-divider--vertical {
    height: 2em;
  }
</style>
